<template>
  <view class="goods_datail">
    <!-- 轮播图 -->
    <swiper
      class="swiper"
      indicator-dots
      indicator-active-color="#EB4450"
      autoplay
    >
      <swiper-item class="swiper_item" v-for="item in pics" :key="item.pics_id">
        <image
          class="swiper_image"
          :src="item.pics_big"
          @tap="showBigImgHandle(item.pics_big)"
        ></image>
      </swiper-item>
    </swiper>
    <!-- 商品标题 -->
    <view class="info">
      <view class="info_head">
        <text class="price">{{ goods_price }}</text>
        <view class="iconfont icon-zhuanfa open_type_button_wrap">
          <button open-type="share" class="open_type_button">分享按钮</button>
        </view>
        <!-- 收藏按钮 -->
        <view @tap="collectHandle" class="iconfont" :class="isCollect ? 'icon-shoucang' : 'icon-shoucang1'"></view>
      </view>
      <view class="title">{{ goods_name }}</view>
    </view>
    <!-- 间隔槽 -->
    <u-gap height="20" bg-color="#F9F9F9"></u-gap>
    <!-- 3.0 图文详情 -->
    <view class="detail">
      <view class="detail_title">图文详情</view>
      <rich-text :nodes="goods_introduce"></rich-text>
    </view>
    <!-- 4.0 底部栏 -->
    <view class="bottom">
      <view class="icon_btn open_type_button_wrap">
        <view class="iconfont icon-kefu"></view>
        <text class="icon_btn_text">联系客服</text>
        <button class="open_type_button" open-type="contact">客服按钮</button>
      </view>
      <navigator
        url="/pages/cart/cart"
        open-type="switchTab"
        hover-class="none"
        class="icon_btn"
      >
        <view class="iconfont icon-gouwuche"></view>
        <text class="icon_btn_text">购物车</text>
      </navigator>
      <view @tap="addToCartHandle" class="button">加入购物车</view>
      <view class="button">立即购买</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goods_id: "",
      pics: [],
      goods_name: "商品名称",
      goods_price: "0",
      goods_introduce: "",
       goods_small_logo: "",
       isCollect:false
    };
  },
  onLoad({ goods_id }) {
    // console.log(goods_id);
    this.goods_id = goods_id;
    this.getGoodsDetail();
    // 页面加载的时候，查找本地存储当前商品是否已经被收藏了
    const collectList = uni.getStorageSync("collectList") || [];
    this.isCollect = collectList.some(item=>item.goods_id === goods_id)
  },
  methods: {
    // 商品详情数据获取
    async getGoodsDetail() {
      const { message } = await this.$u.api.getGoodsDetail({
        goods_id: this.goods_id,
      });
      console.log(message);
      this.pics = message.pics;
      this.goods_name = message.goods_name;
      this.goods_price = message.goods_price;
      this.goods_small_logo = message.goods_small_logo
      let htmlStr = message.goods_introduce.replace(
        /<img/g,
        '<img class="img"'
      );
      //获取系统状态
      uni.getSystemInfo({
        success: (res) => {
          // console.log(res);
          //注意：ios平台不支持 .webp 图片格式，需要替换成 .jpg
          if (res.system.startsWith("iOS")) {
            // IOS 平台需要替换图片格式
            let iosStr = htmlStr.replace(/\.webp/g, ".jpg");
            this.goods_introduce = iosStr;
          } else {
            // 其他平台不需要处理
            this.goods_introduce = htmlStr;
          }
        },
      });
    },
    // 显示大图
    showBigImgHandle(current) {
      // console.log(current)
      // console.log(this.pics)
      const urls = this.pics.map((item) => item.pics_big);
      // console.log(urls)
      uni.previewImage({
        urls,
        current,
      });
    },
    //收藏
    collectHandle(){
      // 准备一个收藏用的对象
      const goodsObj = {
        goods_id: this.goods_id,
        goods_small_logo: this.goods_small_logo,
        goods_price: this.goods_price,
        goods_name: this.goods_name,
      }
      // 读取本地存储的收藏列表
      const collectList = uni.getStorageSync('collectList') || []
      // 查找当前商品 id 是否已经存在收藏列表中
      const index = collectList.findIndex(item=>item.goods_id === this.goods_id)
      // console.log(index)
      // -1 表示是新的商品，需要添加到收藏列表中
      if(index===-1){
        // 把当前商品追加到收藏列表
        collectList.push(goodsObj)
      }else{
        collectList.splice(index,1)
      }
      this.isCollect = !this.isCollect
      //更新本地存储
      uni.setStorageSync('collectList', collectList)
    },
    // 加入购物车
    addToCartHandle(){
      // 读取本地存储中的购物车数据
      const cartList = uni.getStorageSync('cartList') || []
      // 检查购物车中是否已经存在当前商品
      const index = cartList.findIndex(item=>item.goods_id === this.goods_id)
      // console.log(index)
      // 如果是新的商品，添加到购物车列表中
      if(index === -1){
        const goodsObj = {
          goods_id:this.goods_id,
          goods_small_logo:this.goods_small_logo,
          goods_price:this.goods_price,
          goods_name:this.goods_name,
          goods_select:true,//选中状态
          goods_count:1//商品数量
        }
        cartList.push(goodsObj)
      }else{
        //旧的商品，数据累加即可
        cartList[index].goods_count +=1
      }
      //把新的购物车列表数据更新到本地存储中
      uni.setStorageSync("cartList",cartList)
      // 交互提示 - 消息提示框
      uni.showToast({
        title: "加入成功",
        // 是否显示透明蒙层，防止触摸穿透
        mask: true,
        duration: 1000,
      });
    }
  },
};
</script>

<style lang="scss">
// 轮播图
.swiper {
  height: 500rpx;
  .swiper_item {
    display: flex;
    justify-content: center;
    align-items: center;
    .swiper_image {
      width: 500rpx;
      height: 500rpx;
    }
  }
}
//商品
.info {
  padding: 20rpx 30rpx;
  .icon-shoucang {
    color: #fcaa23;
  }
  .info_head {
    display: flex;
    .price {
      flex: 1;
      font-size: 36rpx;
      color: #eb4450;
      &::before {
        content: "¥";
        font-size: 80%;
        margin-right: 3rpx;
      }
    }

    .iconfont {
      margin: 0 10rpx;
    }
  }

  .title {
    font-size: 30rpx;
    line-height: 1.4;
    margin: 5rpx;
  }
}
//特殊功能按钮处理 定位到上方并且设置透明度
.open_type_button_wrap {
  position: relative;
  .open_type_button {
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
.detail {
  padding-bottom: 94rpx;
  .detail_title {
    height: 80rpx;
    display: flex;
    font-size: 26rpx;
    justify-content: center;
    align-items: center;
  }
}
// 小程序规定，要修改富文本的标签样式，只能通过类选择器修改，不支持HTML标签选择器
.img {
  /* 覆盖默认基线对齐造成的图片底部缝隙影响 */
  vertical-align: top;
}
//底部
.bottom {
  height: 94rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 20rpx;
  .icon_btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .iconfont {
      font-size: 40rpx;
    }
    .icon_btn_text {
      font-size: 20rpx;
    }
  }
  .button {
    width: 196rpx;
    height: 60rpx;
    border-radius: 30rpx;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fcaa23;
    margin: 0 10rpx;
    &:last-child {
      background-color: #ea4350;
    }
  }
}
</style>